<template>
  <div class="home">
    <div class="sidebar">
      <h1>论文管理系统</h1>
      <el-menu
        default-active="/home/paper"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/home/paper">
          <i class="el-icon-menu"></i>
          <span slot="title">论文管理</span>
        </el-menu-item>
        <el-menu-item index="/home/upload">
          <i class="el-icon-document"></i>
          <span slot="title">论文上传</span>
        </el-menu-item>
        <el-menu-item index="/home/file">
          <i class="el-icon-files"></i>
          <span slot="title">文件管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right-view">
      <div class="header">
        <div class="user">
          {{ email }}
           <el-link :underline="false" @click="handleLogout" type="primary" class="logout">退出登录</el-link>
        </div>
      </div>
      <div class="main">
        <router-view></router-view>
        
      </div>
    </div>
  </div>
</template>

<script>
import { getEmail, setEmail, setToken } from '../libs/tools'
import { logout } from '../api/v1/auth'
export default {
  name: 'Home',
  data() {
    return {
      email: getEmail()
    }
  },
  methods: {
    handleLogout() {
      logout().then(res => {
        setEmail('')
        setToken('')
        this.$router.push({ path: '/login' })
      }).catch(e => {
        setEmail('')
        setToken('')
        this.$router.push({ path: '/login' })
        console.log(e)
      })
    }
  },
}
</script>

<style scoped>


.home {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

.home > .sidebar {
  width: 200px;
  height: 100%;
}

.home > .sidebar .el-menu-vertical-demo {
  height: calc(100% - 100px);
}

.home > .sidebar h1 {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100px;
  border-right: solid 1px #e6e6e6;
  background-color: #545c64;
  font-size: 26px;
  line-height: 100px;
  text-align: center;
  color: #fff;
}

.home > .right-view {
  width: calc(100% - 200px);
  height: 100%;
}

.home > .right-view > .header {
  position: relative;
  height: 50px;
  line-height: 50px;
  background-color: #545c64;
}

.home > .right-view > .header > .user {
  position: absolute;
  right: 50px;
  color: rgb(233, 233, 233);
}
.home > .right-view > .header > .user .logout {
  display: inline;
}
.home > .right-view > .main {
  position: relative;
  height: calc(100% - 50px);
  padding: 20px 30px;
  overflow: auto;
}

</style>